<template>
  <div>
    <a-card title="分摊配置">
      <div style="margin-bottom:12px;">
        <a-button type="primary" @click="openAdd">新增分摊</a-button>
      </div>
      <a-table :dataSource="list" :loading="loading" :pagination="pagination" rowKey="id" bordered>
        <a-table-column title="规则ID" dataIndex="ruleId" />
        <a-table-column title="角色" dataIndex="roleCode" />
        <a-table-column title="占比(%)" dataIndex="sharePct" />
        <a-table-column title="下限" dataIndex="minCap" />
        <a-table-column title="上限" dataIndex="maxCap" />
      </a-table>
    </a-card>

    <a-modal v-model:visible="visible" title="新增分摊" @ok="save">
      <a-form :model="form" labelCol="{ span:6 }" wrapperCol="{ span:16 }">
        <a-form-item label="规则ID"><a-input v-model:value="form.ruleId"/></a-form-item>
        <a-form-item label="角色"><a-select v-model:value="form.roleCode" :options="roleOpts"/></a-form-item>
        <a-form-item label="占比(%)"><a-input-number v-model:value="form.sharePct" :precision="4" style="width:100%"/></a-form-item>
        <a-form-item label="下限"><a-input-number v-model:value="form.minCap" :precision="2" style="width:100%"/></a-form-item>
        <a-form-item label="上限"><a-input-number v-model:value="form.maxCap" :precision="2" style="width:100%"/></a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import { getAppEnvConfig } from '/@/utils/env';
import { useUserStore } from '/@/store/modules/user';

const { VITE_GLOB_API_URL } = getAppEnvConfig();
const userStore = useUserStore();
const list = ref([]);
const loading = ref(false);
const pagination = reactive({ current: 1, pageSize: 10, total: 0, onChange: (p,s)=>{pagination.current=p; pagination.pageSize=s; fetchData();}});

const visible = ref(false);
const form = reactive({ ruleId:'', roleCode:'EXECUTOR', sharePct:0, minCap: null, maxCap: null });
const roleOpts = [ { value:'EXECUTOR', label:'执行人' }, { value:'CHECKER', label:'核查人' } ];

function openAdd(){ visible.value = true; }

async function fetchData(){
  loading.value = true;
  try{
    const res = await axios.get(`${VITE_GLOB_API_URL}/hr/commission/split/list`, { params: { pageNo: pagination.current, pageSize: pagination.pageSize }, headers: { 'X-Access-Token': userStore.getToken }});
    if(res.data?.success){ list.value = res.data.result.records || []; pagination.total = res.data.result.total || 0; }
  } finally { loading.value = false; }
}

async function save(){
  await axios.post(`${VITE_GLOB_API_URL}/hr/commission/split/add`, form, { headers: { 'X-Access-Token': userStore.getToken }});
  visible.value = false; fetchData();
}

fetchData();
</script>

<style scoped>
</style>


